<template>
  <el-container class="layout-container">
    <!-- 左侧菜单 -->
    <el-aside width="200px">
      <div class="el-aside__logo"></div>
      <el-menu 
        active-text-color="#ffd04b"
        background-color="#232323"
        text-color="#fff"
        router
        :default-active="defaultRoute"
      >
        <el-menu-item index="/admin/bookManagement" v-if="bookManagement">
          <el-icon>
            <Management/>
          </el-icon>
          <span>图书管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/bookCategories" v-if="bookClassificationManagement">
          <el-icon>
            <Reading/>
          </el-icon>
          <span>图书分类管理</span>
        </el-menu-item>

        <el-sub-menu v-if="bookLendingManagement" class="el-menu-sub-menu" index="bookLendingManagement">
          <template #title>
            <el-icon>
              <Collection/>
            </el-icon>
            <span>图书借阅管理</span>
          </template>
          <el-menu-item index="/admin/bookLendingManagement">
            <el-icon>
              <Position />
            </el-icon>
            <span>图书借阅审批</span>
          </el-menu-item>
          <el-menu-item index="/admin/userBorrowingHistory">
            <el-icon>
              <Postcard />
            </el-icon>
            <span>用户借阅历史</span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/admin/userManagement" v-if="userManagement">
          <el-icon>
            <User/>
          </el-icon>
          <span>用户管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/adminManagement" v-if="adminAccountManagement">
          <el-icon>
            <Discount/>
          </el-icon>
          <span>管理员账户管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/roleManagement" v-if="adminAccountManagement">
          <el-icon>
            <Setting/>
          </el-icon>
          <span>角色管理</span>
        </el-menu-item>

        <el-menu-item index="/admin/statistics" v-if="informationDisplayPanel">
          <el-icon>
            <Tickets/>
          </el-icon>
          <span>信息展示面板</span>
        </el-menu-item>

        <el-sub-menu class="el-menu-sub-menu" index="personalCenter">
          <template #title>
            <el-icon>
              <UserFilled/>
            </el-icon>
            <span>个人中心</span>
          </template>
          <el-menu-item index="/admin/adminProfile">
            <el-icon>
              <User/>
            </el-icon>
            <span>基本资料</span>
          </el-menu-item>
          <el-menu-item index="/admin/changePassword">
            <el-icon>
              <EditPen/>
            </el-icon>
            <span>重置密码</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <!-- 右侧主区域 -->
    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <p class="el-alert_title">图书借阅系统管理端</p>
      </el-header>
      <!-- 中间区域 -->
      <el-main>
        <RouterView/>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import {
  Management,
  Position,
  UserFilled,
  User,
  EditPen,
  Reading,
  Collection,
  Discount,
  Postcard,
  Tickets,
  Setting
} from '@element-plus/icons-vue'
import {useRouter} from "vue-router";
import {ref} from "vue";

//组件控制
//图书管理
const bookManagement = ref(false)
//图书分类管理
const bookClassificationManagement = ref(false)
//图书借阅管理
const bookLendingManagement = ref(false)
//用户管理
const userManagement = ref(false)
//管理员账户和权限管理
const adminAccountManagement = ref(false)
//信息展示面板
const informationDisplayPanel = ref(false)

const router = useRouter()

// 清除本地缓存并重定向到登录页
const clearAndRedirect = () => {
  localStorage.clear(); // 清空所有本地存储
  router.push('/admin/login'); // 重定向到登录页
}

// 获取权限数据的函数
const getPermissions = () => {
  try {
    // 优先从 query 参数获取
    const query = router.currentRoute.value.query;
    let permissions = [];
    
    if (query.data) {
      if (Array.isArray(query.data)) {
        permissions = query.data;
      } else {
        permissions = [query.data];
      }
      // 将权限数据保存到 localStorage
      localStorage.setItem('adminPermissions', JSON.stringify(permissions));
    } else {
      // 如果 query 中没有数据，从 localStorage 获取
      const storedPermissions = localStorage.getItem('adminPermissions');
      if (storedPermissions) {
        permissions = JSON.parse(storedPermissions);
      } else {
        // 如果本地存储也没有权限数据，可能是未授权状态
        clearAndRedirect();
        return [];
      }
    }
    
    return permissions;
  } catch (error) {
    console.error('获取权限数据失败:', error);
    clearAndRedirect();
    return [];
  }
}

// 初始化权限数据
const dataList = getPermissions();

// 获取默认路由
const getDefaultRoute = () => {
  if (dataList.includes("BookManagementRelated")) {
    return '/admin/bookManagement';
  } else if (dataList.includes("CategoryManagementRelated")) {
    return '/admin/bookCategories';
  } else if (dataList.includes("UserManagementRelated")) {
    return '/admin/userManagement';
  } else if (dataList.includes("SystemSettingsRelated")) {
    return '/admin/adminManagement';
  } else if (dataList.includes("StatisticsAnalysisRelated")) {
    return '/admin/statistics/dashboard';
  }
  return '/admin/personalCenter'; // 如果没有其他权限，默认显示个人中心
}

// 设置默认路由
const defaultRoute = getDefaultRoute();
router.push(defaultRoute);

//根据管理员权限列表展示组件
if (dataList.includes("BookManagementRelated")) {
  bookManagement.value = true
  bookClassificationManagement.value = true
  bookLendingManagement.value = true
}
if (dataList.includes("CategoryManagementRelated")) {
  bookLendingManagement.value = true
}
if (dataList.includes("UserManagementRelated")) {
  userManagement.value = true
}
if (dataList.includes("SystemSettingsRelated")) {
  adminAccountManagement.value = true
}
if (dataList.includes("StatisticsAnalysisRelated")) {
  informationDisplayPanel.value = true
}

/**
 * 获取用户信息
 * @returns {Promise<void>}
 */
const getUserInfo = async () => {

}
getUserInfo()
/**
 * 登出
 * @param command
 */
</script>

<style lang="scss" scoped>
.layout-container {
  height: 100vh;
  display: flex;

  .el-aside {
    background-color: rgb(197.7, 225.9, 255);

    &__logo {
      height: 120px;
      background: url('https://lovechronicle.oss-cn-zhangjiakou.aliyuncs.com/book.jpg') no-repeat center / 120px auto;
    }

    .el-menu {
      border-right: none;
      background-color: rgb(51.2, 126.4, 204);
    }
  }

  .el-header {
    background-color: rgb(197.7, 225.9, 255);
    display: flex;
    align-items: center;
    justify-content: space-between;

    .el-dropdown__box {
      display: flex;
      align-items: center;

      &:active,
      &:focus {
        outline: none;
      }
    }
  }

  .el-menu-sub-menu {
    .el-menu-item {
      background-color: rgb(51.2, 126.4, 204);
    }
  }

  .el-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #666;
  }

  .el-header {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
  }

  .el-alert_title {
    margin: 0;
  }
}
</style>
